<template>
  <div class="my-data">
    <!-- 全部站点数据总览 -->
    <NavPrev class="my-data-content-con" :navPrev="navPrev"></NavPrev>

    <!-- 全部站点数据 -->
    <div class="my-data-list">
      <div class="my-data-list-box">
        <div class="list-box-head">
          <p>
            <span>全部作品数据</span>
            <el-input
              size="small"
              placeholder="请输入内容↵"
              v-model="searchKey"
              @change="search4ProduByKey">
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
            </el-input>
          </p>
        </div>
        <div class="list-box-nav">
          <a href="javascript:;">作品名称 <i class="jy-icon-sort"></i> </a>
          <a href="javascript:;">数据 </a>
          <a href="javascript:;">创建时间 <i class="jy-icon-sort"></i> </a>
          <a href="javascript:;">抽奖结果 </a>
        </div>
        <ul class="list-box">
          <li :key="index" v-for="(item, index) in lists"
            :class="{
              'is-detail-active': curSiteId==item.site_id,
            }">
            <a href="javascript:;" @click.stop="click2ShowDetail(item)">
              <span class="site">
                ({{item.site_id}})
              </span>
              {{item.name}}
            </a>
            <!-- 2个小时后更新 -->
            <a href="javascript:;"
              @click.stop="click2ShowDetail(item)">
                <span class="new-msg">
                  {{item.aggre_formdata_allnum}}
                  <i v-if="item.aggre_formdata_newnum && !isNaN(parseInt(item.aggre_formdata_newnum)) && parseInt(item.aggre_formdata_newnum) > 0">
                    {{item.aggre_formdata_newnum}}
                  </i>
                </span>
            </a>
            <a href="javascript:;" @click.stop="click2ShowDetail(item)">
              {{item.add_time}}
            </a>
            <a href="javascript:;"
              style="padding-right: 20px;"
              @click="onGetExportData(item)">
              <el-icon><download /></el-icon>
            </a>
          </li>
        </ul>
        <iframe src="" ref="lotteryIframe" style="position:absolute;visibility:hidden;height:0;"></iframe>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :page-count="totalPage"
        :current-page="curPage"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import NavPrev from '@/views/child/admin/adminData/NavPrev.vue'
  import { mapState, mapActions } from 'vuex'
  import { reactive } from 'vue'

  export default {
    setup () {
      const state =  reactive({
        searchKey: '',
        curSiteId: '',
      })
      const state_ = {
        curPage: 1,
        pageSize: 20,
        tips: '<p>· 浏览量（pv）指作品被打开浏览的次数<br />\
          · 访客数（uv）指有多少人浏览了该作品<br />\
          · 分享数指作品在微信中被分享到朋友圈和转发到会话的次数<br />\
          · 平均停留时间指作品每次浏览的时间总和／总的浏览次数<br />\
          · 由于访问统计受访客的网络原因影响，统计数据可能会出现微小偏差</p>',

        searchTimer: null,
      }
      _.merge(state, state_)
      return state
    },
    computed: {
      ...mapState({
        lists: state => state.user.myLists,
        listsData: state => state.user.myListsData,
        navPrev: state => state.user.myNavPrev,
        totalPage: state => state.user.myListsData.totalPage || 0,
      }),
    },
    components: {
      NavPrev,
    },
    beforeMount() {
      this.curPage = parseInt(this.$route.query.page) || 1;
      this.getNavPrev();
      this.getMyLists({
        page: this.curPage,
        pageSize: 20,
      });
    },
    mounted() {},
    methods: {
      ...mapActions({
        getNavPrev: 'user/getNavPrev',
        getMyLists: 'user/getMyLists',
      }),
      handleCurrentChange(val) {
        this.curPage = val;
        this.getMyLists({
          page: this.curPage,
          pageSize: 20,
          keywords: this.searchKey,
        });
      },
      search4ProduByKey() {
        let that = this;
        if(this.searchTimer) clearTimeout(this.searchTimer);
        this.searchTimer = setTimeout(function() {
          that.curPage = 1;
          that.$store.dispatch("user/getMyLists", {
            page: that.curPage,
            pageSize: 20,
            keywords: that.searchKey,
          });
        }, 200);
      },
      click2ShowDetail(item) {
        this.curSiteId = item.site_id;
        this.$router.push({ path: `/admin/data/${this.curSiteId}`, query: { site_id: this.curSiteId, page: this.curPage } });
      },
      onGetExportData(item){
        this.$refs.lotteryIframe.src = this.env.apiUrl + '/stat/expdata?site_id=' + item.site_id + '&table=com_lottery';
      },
    },
  }
</script>
